<!--
  For usage and examples see ui/elements/components/expandable-card-demo.html.
  If you want the card to start collapsed, then set collapsed on the element.
-->

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-collapse/iron-collapse.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/paper-card/paper-card.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">

<dom-module id="expandable-card">
  <template>
    <style>
      :host {
        display: inline-flex;
        width: 100%;
        overflow: hidden;
      }

      paper-card {
        background-color: #fafafa;
      }

      paper-button {
        width: 100%;

        text-transform: none;
        text-align: left;

        margin: 0px;
        padding: 0 5px;
      }

      #card {
        width: 100%;
      }

      #header {
        background-color: #DADCE0;
        margin: auto;
        text-align: left;
        border-color: 2px solid #000;
      }

      #header::slotted(*) {
        float: left;
      }

      .header-content {
        width: 100%;
      }

      .header-button {
        display: inline-block;
      }

      #content {
        clear: both;
      }
    </style>
    <paper-card id="card">
      <paper-button noink id="header" on-tap="toggleCollapsed">
        <div class="header-button">
          <!-- Button to expand and show more. -->
          <template is="dom-if" if="[[collapsed]]">
            <paper-icon-button icon="add"></paper-icon-button>
          </template>

          <!-- Button to collapsed and show less. -->
          <template is="dom-if" if="[[!collapsed]]">
            <paper-icon-button icon="remove"></paper-icon-button>
          </template>
        </div>
        <!-- Header content will be displayed always. -->
        <div class="header-content">
          <slot name="expandable-card-header"></slot>
        </div>
      </paper-button>

      <div id="content">
        <iron-collapse id="collapse" on-touch="toggleCollapsed" opened=[[!collapsed]]>
          <!-- Content is the stuff that'll be hidden -->
          <slot name="expandable-card-content"></slot>
        </iron-collapse>
      </div>

    </paper-card>
  </template>
  <script>
    (function () {
      'use strict';

      Polymer({
        is: 'expandable-card',
        properties: {
          collapsed: {
            type: Boolean,
            value: false
          },
        },

        // Event handlers.
        toggleCollapsed: function (e) {
          if (e.srcElement.localName === "a")
            return; // Don't expand if a link inside is clicked.
          this.collapsed = !this.collapsed;
          this.$.collapse.opened = !this.collapsed;
        },
      });
    })();
  </script>
</dom-module>